<template>
  <div class="order">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()"/>
      </template>
      <template #center> 确认订单 </template>
    </my-header>
    <div class="adress van-contact-card">
        <van-icon name="location-o" />
        <section>
           <h6>{{address.linkMan}}{{address.mobile}}</h6>
           <p>{{address.address}}</p>
        </section>
        <van-icon name="arrow" />
    </div>
    <div class="title">商品列表</div>
    <ul>
        <li v-for="(item,index) in orderList" :key="index">
            <img :src="item.img" alt="">
            <section>
              <p><span>{{item.name}}</span><span>￥{{item.price}}</span></p>
              <p style="color:#999"><span>{{item.ties}}</span><span>x{{item.buyNum}}</span></p>
            </section>
        </li>
    </ul>
    <div class="sendFtn">
        <span>配送方式</span>
        <span>快递</span>
    </div>
     <van-field v-model="remark" label="备注" placeholder="请输入备注" />
     <div class="sendFtn">
        <span>商品金额</span>
        <span>￥{{Allprice}}</span>
    </div>
    <van-submit-bar :price="Allprice*100" button-text="提交订单" @submit="submit" />

  </div>
</template>

<script>
import { ref, reactive, toRefs,computed } from "vue";
import { getAddress } from "../../api/secendPage/index";
import myHeader from "../../components/myHeader.vue";
import { useStore } from 'vuex';
export default {
  components: { myHeader },
  setup() {
    const { state } = useStore();
    
    // [{"goodsId":99764,
    // "logisticsType":0,
    // "number":1,
    // "propertyChildIds":"8783:35183,",
    // "checked":true},
    // {"goodsId":99762,
    // "logisticsType":0,
    // "number":1,
    // "propertyChildIds":"5351:17886,",
    // "checked":true}]



    const data = reactive({
      address: {},
      orderList: computed(() => state.cartList.filter(item => item.order)),
      remark:'', // 备注信息
      Allprice: computed(() => {
        let price = 0;
        state.cartList.forEach(item => {
           if(item.order){
              price+=item.price*item.buyNum
           }
        })
        return price
      }), // 商品金额
    })
    getAddress({token:localStorage.getItem('token')}).then(res => {
       data.address = res.data;
    })

    const submit = () => {

    }
    return{
      ...toRefs(data),
      submit
    }
  },
};
</script>
<style lang="scss" scoped>
.order{
    height: 100%;
    background: #e9e9e9;
    .adress{
      position: relative;
      background: #fff;
      display: flex;
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 13px;
      align-items: center;
      .van-icon{
        color: #dbdadf;
        font-size: 18px;
      }
      section{
        flex: 1;
        padding: 0 20px;
        p{
            margin-top: 20px;
            color: grey;
        }
      }
    }
    .title{
      line-height: 40px;
      background: #fff;
      padding-left: 30px;
      font-size: 14px;
      margin: 10px 0 5px 0;
    }
    li{
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      background: #fff;
      font-size: 13px;
      img{
        width: 80px;
      }
      section{
        flex: 1;
        padding: 10px 0;
        margin-left: 10px;
        display: inline-flex;
        flex-wrap: wrap;
        align-content: space-between;
        p{
          width: 100%;
          display: inline-flex;
          justify-content: space-between;
        }
      }
    }
    .sendFtn{
      height: 40px;
      background: #fff;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      font-size: 14px;
      border-bottom: 1px solid #E5E5E5;
    }
}
</style>